<template>
	<view class="flex-col page">
		<van-dropdown-menu active-color='#635df7'>
		  <van-dropdown-item :value="value1" :options="option1" @change='onSwitchChange'/>
		  <van-dropdown-item :value="value2" :options="option2" @change='onSwitchChange'/>
		</van-dropdown-menu>
		
		<view class="flex-col flex-auto group space-y-30">
			<view class="top_search">
				<u-search maxlength='-1' placeholder="搜索学员" :showAction="false" v-model="keyword" @search="searchlist">
				</u-search>
			</view>
			<!-- <view class="grid">
				<navigator :url="item.url" class="grid-item" v-for="(item,index) in menulist" :key="index">
					<image mode="aspectFit" :src="item.icon" class="icon" />
					<view>{{item.text}}</view>
					<view>{{item.text}}</view>
				</navigator>
			</view> -->
			<view class="flex-col justify-start section">
				<view class="flex-row equal-division space-x-30">
					<view class="flex-col equal-division-item ">
						<text class="font_1" style="text-align: center;">2650</text>
						<text class="font_2" style="margin-top: 19rpx;text-align: center;">总学员数</text>
						<view style="margin-top: 10rpx;">
							<view  style="float: left;margin-left: 30%;" >
								<view class="font_text" >相较</view>
								<view class="font_text" style="margin-top: 2rpx;">上周</view>
							</view>
							<image style="width: 14rpx;height: 20rpx;float: left;margin-top: 10rpx;margin-left: 10rpx;" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/bc9ffbee49d0c033fad59106d7477793111f8166.png" mode=""></image>
							<view style="float: right;margin-right: 20%;color: #666666;font-size: 20rpx;">
								10%
							</view>
						</view>
						
					</view>
					<view class="flex-col items-center equal-division-item space-y-19">
						<text class="font_1">328</text>
						<text class="font_2">总课时数</text>
					</view>
					<view class="flex-col items-center equal-division-item space-y-19">
						<view class="group_2">
							<text class="font_1">80</text>
							<text class="text_2">%</text>
						</view>
						<text class="font_2">课时进度</text>
					</view>
				</view>
			</view>
			
			<view class="flex-row group_3 space-x-22">
				<view class="section_2"></view>
				<text class="font_3 text_3">学员列表</text>
			</view>
			<view class="flex-row group_5 space-x-37">
				<u-tabs :list="tabList" lineColor="#ffffff " :activeStyle="{
			    color: '#000000 ',
			  }" :inactiveStyle="{
			    color: '#c2c1c1',
			  }" :lineWidth="30" :current="currentlist" @click="onClicklist" />
			</view>
			<scroll-view scroll-y class="scrolllist" v-if="currentlist == 0">
				<view class="flex-col ">
					<view v-for="(item, i) in 3" style="margin-top: 20rpx;" @click="schedule(item)">
						<view class="flex-row items-center group_4 space-x-21">
							<view class="flex-col justify-start items-center relative group_5">
								<image class="image_4"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70c18dc329c0011116df0/16383413563475502306.png" />
								<view class="flex-col justify-start items-center text-wrapper pos"><text
										class="font_6">28</text></view>
							</view>
							<view class="flex-col items-start flex-auto space-y-29">
								<text class="font_4">蒋忠艳</text>
								<text class="font_5">学号:2013065256</text>
							</view>
						</view>
						<view class="list-divider"></view>
					</view>
				</view>
			</scroll-view>
			
		</view>
		
		<!-- 全部校区下拉 -->
		<view class="group_mask" v-if="show"></view>
		<view class="group_content" v-if="show" >
			<view class="aside ">
				<view :data-index2="index" v-for="(item , index) in cate" :key="index" @click="fenlei(item , index)"
					:class="{'aside-item':true , 'active':item.id == catenum}">
					<view class="aside-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 全部教练下拉 -->
		<view class="group_mask" v-if="coach"></view>
		<view class="group_content" v-if="coach" >
			<view class="aside ">
				<view :data-index2="index" v-for="(item , index) in mask" :key="index" @click="coachlist(item , index)"
					:class="{'aside-item':true , 'active':item.id == coachnum}">
					<view class="aside-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option1: [
				      { text: '全部校区', value: 0 },
				      { text: '南通校区', value: 1 },
				      { text: '苏州校区', value: 2 },
					  { text: '南京校区', value: 3 },
				    ],
				    option2: [
				      { text: '全部教练', value: 'a' },
				      { text: '宗教练', value: 'b' },
				      { text: '袁教练', value: 'c' },
					  { text: '石教练', value: 'd' },
				    ],
				    value1: 0,
				    value2: 'a',
				
				value: '',
				keyword: '', //搜索
				list_bUqUbFvr: [null, null, null, null, null, null],
				menulist: [{
						icon: 'https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/62b1854fc1c22a0011ec2d62/16563176317030846348.png',
						text: '邀请到店',
						text1: '来馆体验',
						url: '/page_admin/coach-side/coach-side'
					},
					{
						icon: 'https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/62b1854fc1c22a0011ec2d62/16563176317059448569.png',
						text: '发送通知',
						text1: '一对一',
						url: '/page_admin/mobile-write-offs/mobile-write-offs'
					},
					{
						icon: 'https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/62b1854fc1c22a0011ec2d62/16563183255822698648.png',
						text: '客户权益',
						text1: '送券送优惠',
						url: '/page_admin/system-log/system-log'
					},
					{
						icon: 'https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/62b1854fc1c22a0011ec2d62/16563183255855194829.png',
						text: '节日问候',
						text1: '温馨关怀',
						url: '/'
					}
				],
				tabList: [{
						name: "教学中"
					},
					{
						name: "已结业"
					}
				],
				currentlist: 0,
				
			};
		},
		onLoad(options) {},
		methods: {
			// value1" :options="option1"
			onSwitchChange(option1){
			},
			onConfirm(option1){
			},
			onClicklist({
				index
			}) {
				this.currentlist = index;
				/* if (this.currentTab === 1) {
				this.orderStatus = '2'
				   
			} else {
				this.orderStatus = 'all'
			} */
			},
			// 搜索
			searchlist() {
			},
			schedule(item) {
				uni.navigateTo({
					url: './management_schedule'
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '../../static/css/common/common.scss';

	.page {
		background-color: #ffffff;
		border-radius: 0px 0px 16rpx 16rpx;
		width: 100%;
		// overflow-y: auto;
		// overflow-x: hidden;
		height: 100%;

		.group {
			padding-top: 18rpx;
			overflow-y: auto;

			.section {
				padding: 30rpx 0;
				background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70c18dc329c0011116df0/16733345557377316906.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.equal-division {
					margin: 0 30rpx;

					.equal-division-item {
						flex: 1 1 210rpx;
						padding: 32rpx 0;
						background-color: #ffffff;
						border-radius: 4rpx;
						height: 160rpx;

						.font_1 {
							font-size: 50rpx;
							line-height: 37rpx;
							font-weight: 700;
							color: #333333;
						}

						.font_2 {
							font-size: 20rpx;
							line-height: 20rpx;
							font-weight: 500;
							color: #666666;
						}
						
						.font_text {
							font-size: 20rpx;
							line-height: 20rpx;
							font-weight: 500;
							color: #666666;
						}

						.group_2 {
							line-height: 37rpx;

							.text_2 {
								color: #333333;
								font-size: 30rpx;
								font-weight: 700;
								line-height: 23rpx;
							}
						}
					}

					.space-y-19 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 19rpx;
						}
					}
				}

				.space-x-30 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 30rpx;
					}
				}
			}

			.group_3 {
				padding: 0 30rpx;

				.section_2 {
					background-color: #635df7;
					border-radius: 3rpx;
					width: 6rpx;
					height: 30rpx;
				}

				.font_3 {
					font-size: 30rpx;
					font-family: PingFang SC;
					line-height: 29rpx;
					font-weight: 700;
					color: #ffffff;
				}

				.text_3 {
					color: #000000;
					line-height: 30rpx;
				}
			}

			.space-x-22 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 22rpx;
				}
			}

			.group_4 {
				padding: 0 34rpx 23rpx;

				.group_5 {
					padding-bottom: 7rpx;
					width: 84rpx;

					.image_4 {
						width: 84rpx;
						height: 84rpx;
					}

					.text-wrapper {
						padding: 6rpx 0;
						background-color: #2f75fa;
						border-radius: 15rpx;
						width: 56rpx;

						.font_6 {
							font-size: 22rpx;
							font-family: PingFang SC;
							line-height: 17rpx;
							font-weight: 500;
							color: #ffffff;
						}
					}

					.pos {
						position: absolute;
						left: 50%;
						top: 61rpx;
						transform: translateX(-50%);
					}
				}

				.space-y-29 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 29rpx;
					}

					.font_4 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 27rpx;
						font-weight: 500;
						color: #333333;
					}

					.font_5 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 23rpx;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.space-x-21 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 21rpx;
				}
			}

			.list-divider {
				margin-left: 30rpx;
				margin-right: 25rpx;
				background-color: #e5e5e5;
				height: 1rpx;
			}
		}

		.space-y-30 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 30rpx;
			}

			.scrolllist {
				width: 100%;
				height: 60vh;
			}

			.equal-divisionlist {
				width: 450rpx;

				.space-x-8 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 8rpx;
					}

					.text_2 {
						line-height: 25rpx;
					}

					.image_4 {
						width: 13rpx;
						height: 11rpx;
					}

					.text_3 {
						line-height: 25rpx;
					}

					.font_1 {
						font-size: 26rpx;
						font-family: PingFang SC;
						line-height: 26rpx;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.top_search {
			padding: 30rpx 30rpx 0rpx 30rpx;
			display: flex;

			.stj {
				display: flex;
				width: 40px;
				flex-direction: column;
				align-items: center;

				.tj {
					font-size: 14px;
				}
			}

			.ssx {
				display: flex;
				width: 40px;
				flex-direction: column;
				align-items: center;

				.sx {
					font-size: 14px;
				}
			}
		}

		.grid {
			margin-top: 40rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			row-gap: 21rpx;

			.grid-item {
				color: rgb(51, 51, 51);
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				display: flex;
				padding: 6.5rpx 0 15rpx;
				flex-direction: column;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.group_mask {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba($color: #090909, $alpha: 0.62);
			// display: flex;
			// align-items: center;
			// justify-content: center;
			z-index: 9;
		}

		.group_content {
			width: 100%;
			height: 50%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			z-index: 99;
			
			.aside {
				background-color: rgb(243, 243, 243);
				height: 90%;
				// min-width: 20%;
				width: 100%;
				margin-top: 10%;
			
				.aside-item {
					padding: 25rpx 0;
					color: rgb(51, 51, 51);
			
					.aside-name {
						width: 100%;
						font-size: 26rpx;
						box-sizing: border-box;
						padding: 5rpx 0px;
						padding-left: 50rpx;
					}
				}
			
				.active {
					font-weight: 700;
					color: rgb(47, 117, 250) !important;
					background-color: white !important;
			
					.aside-name {
						border-left: 8rpx solid rgb(47, 117, 250);
						;
					}
				}
			}
		}
	}
</style>
